<template>
	<view class="myCollectionDetail">
		<!-- <header-box :title="pageTitle" :isShare="true"></header-box> -->
		<view class="collectionDetail-box" v-if="collectionData">
			<!-- 放3d图 -->
			<view class="lighting-bg"><image class="lighting-bg-img" src="../../static/img/lighting-bg.png" mode=""></image></view>
			<view class="collectionDetail-3d-content" v-if="collectionData.objModel">
				<view class="collectionDetail-3d-content-model">
					<model-obj
						:src="collectionData.objModel"
						:mtl="collectionData.mtlModel"
						:rotation="rotation"
						@on-load="onLoading"
						backgroundColor="rgba(22,24,29,0)"
						:backgroundAlpha="0"
						:controlsOptions="{
						  enableZoom
						}"
					></model-obj>
				</view>
				
			</view>
			
			<!-- 图片模式 -->
			<view class="collectionDetail-img-model" v-else>
				<view class="collectionDetail-img-model-box">
					<view class="_img-model">
						<view class="_img-model-box">
							<image class="_img-model-bg" src="../../static/img/collection-bg.png" mode=""></image>
							<view class="_img-model-content">
								<image class="_img-model-content_img" :src="collectionData.img" mode=""></image>
							</view>
						</view>
						
					</view>
				</view>
			</view>
			
			<!-- 3d图的底座 -->
			<view class="collectionDetail-3d-bottom">
				<view class="collectionDetail-3d-bottom-box">
					<image class="collectionDetail-3d-bottom-img" src="../../static/img/3d-bottom-icon.png" mode=""></image>
					<view class="collectionDetail-info">
						<view class="collectionDetail-info-title"><text>{{collectionData.name}}</text></view>
						<view class="collectionDetail-info-main">
							<text class="_info-main-l">{{collectionData.level}}</text>
							<!-- <text class="_info-main-r"><text class="_info-main-r-text">剩余</text><text class="_info-main-r-num">1000份</text></text> -->
						</view>
					</view>
				</view>
			</view>
			<view class="collectionDetail-main">
				<view class="collectionDetail-main-box">
					<!-- <view class="collectionDetail-price"><text>￥149</text></view> -->
					
					<view class="collectionDetail-business">
						<view class="collectionDetail-business-item">
							<text class="collectionDetail-business-item-label">编号：</text>
							<text class="collectionDetail-business-item-val">{{collectionData.relId}}</text>
						</view>
						<view class="collectionDetail-business-item collectionDetail-business-item-top">
							<text class="collectionDetail-business-item-label">发行日期：</text>
							<text class="collectionDetail-business-item-val">{{collectionData.createTime}}</text>
						</view>
					</view>
					
					<view class="collectionDetail-business">
						<view class="collectionDetail-business-item">
							<text class="collectionDetail-business-item-label">发行方：</text>
							<text class="collectionDetail-business-item-val">{{collectionData.issuer}}</text>
						</view>
						<view class="collectionDetail-business-item collectionDetail-business-item-top">
							<text class="collectionDetail-business-item-label">品牌方：</text>
							<text class="collectionDetail-business-item-val">{{collectionData.brand}}</text>
						</view>
					</view>
					
					<view class="collectionDetail-business">
						<view class="collectionDetail-business-item">
							<text class="collectionDetail-business-item-label">所属链：</text>
							<text class="collectionDetail-business-item-val">{{collectionData.nftType}}</text>
						</view>
						<view class="collectionDetail-business-item collectionDetail-business-item-top">
							<text class="collectionDetail-business-item-label">链上地址：</text>
							<text class="collectionDetail-business-item-val">{{collectionData.nftAddress}}</text>
						</view>
					</view>
					
					<!-- <view class="collectionDetail-record">
						<u-collapse
							@change="recordChange"
							@close="recordClose"
							@open="recordOpen"
							:border="false"
						>
							<u-collapse-item
							  
							>	
								<text slot="title" class="u-page__item__title__slot-title">交易记录<text class="_num">(7次)</text></text>
								<view class="u-collapse-content">
									<view class="collapse-content-item">
										<view class="collapse-content-item-box">
											<view class="collapse-content-item-name"><text>杭州动漫有限公司</text></view>
											<view class="collapse-content-item-money"><text>688 元</text></view>
										</view>
										<view class="collapse-content-item-time"><text>2021-11-12</text></view>
									</view>
									<view class="collapse-content-item">
										<view class="collapse-content-item-box">
											<view class="collapse-content-item-name"><text>中国动漫</text></view>
											<view class="collapse-content-item-money"><text>588 元</text></view>
										</view>
										<view class="collapse-content-item-time"><text>2021-11-12</text></view>
									</view>
									<view class="collapse-content-item">
										<view class="collapse-content-item-box">
											<view class="collapse-content-item-name"><text>杭州动漫有限公司</text></view>
											<view class="collapse-content-item-money"><text>488 元</text></view>
										</view>
										<view class="collapse-content-item-time"><text>2021-11-12</text></view>
									</view>
									<view class="collapse-content-item">
										<view class="collapse-content-item-box">
											<view class="collapse-content-item-name"><text>聪明的小金</text><text class="_name-my">我</text></view>
											<view class="collapse-content-item-money"><text>388 元</text></view>
										</view>
										<view class="collapse-content-item-time"><text>2021-11-12</text></view>
									</view>
								</view>
							</u-collapse-item>
						</u-collapse>
					</view> -->
					
					<view class="collectionDetail-main-chunk">
						<view class="collectionDetail-main-chunk-header"><text>作品详情</text></view>
						<view class="collectionDetail-main-chunk-content">
							<view class="collectionDetail-main-chunk-content-box">
								<text>{{collectionData.description}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 底部 -->
			<view class="page-footer" :class="!pageFooterFlag?'page-footer-bottom':''">
				<view class="page-footer-box" @click="toIncrease">
					<view class="_footer-btn"><text>转赠</text></view>
				</view>
			</view>
		</view>
		
		<!-- 弹窗 -->
		<u-popup :show="tipsShow" :round="20" mode="center" :overlayOpacity="0.8" @close="close" @open="open">
			<view class="tipsPopup">
				<view class="tipsPopup-icon"><image class="tipsPopup-icon-img" src="../../static/img/careful-icon.png" mode=""></image></view>
				<view class="tipsPopup-title"><text>购买前查阅</text></view>
				<view class="tipsPopup-text"><text>付款后商品自动上链，不可退换</text></view>
				<view class="tipsPopup-confirm" @click="toPay"><text>我已知悉</text></view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import { ModelObj } from 'vue-3d-model'
	export default {
		data() {
			return {
				pageTitle:'',
				pageFooterFlag:true,
				pageScrollTimer:null,
				pageFooterFlag:true,
				tipsShow:false,
				relId:'',
				collectionData:null,
				rotation: {
					x: 0,
					y: 0,
					z: 0
				},
				enableZoom:false,
				from:1,
			};
		},
		components: {
			ModelObj
		},
		onLoad(option) {
			if (option.relId) {
				this.relId = option.relId
				this.getMyCollectionDetail()
				this.from = option.from;
			}
		},
		methods:{
			tipsPopupOpen() {
				this.tipsShow = true;
			},
			open() {
				// console.log('open');
			},
			close() {
				this.tipsShow = false
				// console.log('close');
			},
			toPay() {
				uni.navigateTo({
					url:'/pages/cashier/cashier'
				})
			},
			recordOpen(e) {
			  // console.log('open', e)
			},
			recordClose(e) {
			  // console.log('close', e)
			},
			recordChange(e) {
			  // console.log('change', e)
			},
			toIncrease() {
				uni.navigateTo({
					url:`/pages/increase/increase?relId=${this.relId}&from=${this.from}`
				})
			},
			getMyCollectionDetail() {
				this.$api.getMyCollectionDetail({relId:this.relId}).then(res => {
					console.log(res)
					if (res.code == 200){
						if (res.data.objModel) {
							let objModel = res.data.objModel;
							res.data.mtlModel = objModel.substr(0,objModel.length-3) + 'mtl';
						}
						this.collectionData = res.data;
					}
				})
			},
			onLoading () {
				// 是否旋转
				// this.rotate();
			},
			rotate () {
				this.rotation.z += 0.01;
				requestAnimationFrame( this.rotate );
			},
		},
		onPageScroll(e) {
			clearTimeout(this.pageScrollTimer) // 每次滚动前 清除一次
			this.pageFooterFlag = false;  
			this.pageScrollTimer = setTimeout(() => { 
				// console.log('滚动结束了');
				this.pageFooterFlag = true; 
			}, 500);
		},
	}
</script>

<style lang="less">
	.myCollectionDetail{
		width: 100%;
		min-height: 100vh;
		background-color: #16181D;
		font-family: PingFangSC-Medium, PingFang SC, '微软雅黑';
		font:caption;
		display: flow-root;
		.lighting-bg{
			width: 100%;
			height: 422rpx;
			position: absolute;
			top: 0;
			z-index: 0;
			.lighting-bg-img{
				width: 100%;
				height: 100%;
			}
		}
		.collectionDetail-box{
			width: 100%;
			padding-bottom: 152rpx;
			display: flow-root;
		}
		.collectionDetail-3d-content{
			// width: 100%;
			// height: 636rpx;
			width: 440rpx;
			height: 440rpx;
			margin: 320rpx auto 0;
			position: relative;
			// background-color: #16181D;
			.collectionDetail-3d-content-model{
				// position: absolute;
				width: 100%;
				height: 100%;
				// background-color: #16181D;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				margin: auto;
				z-index: 1;
			}
		}
		.collectionDetail-img-model{
			width:100%;
			height: 636rpx;
			.collectionDetail-img-model-box{
				width:606rpx;
				height:606rpx;
				margin: 0 auto;
				position: relative;
			}
			._img-model{
				width: 100%;
				height: 100%;
				position: absolute;
				top: 70rpx;
				z-index: 1;
				._img-model-box{
					width: 100%;
					height: 100%;
					position: relative;
					overflow: hidden;
					border-radius: 20rpx;
				}
				._img-model-bg{
					width: 100%;
					height: 100%;
				}
				._img-model-content{
					width: 100%;
					height: 100%;
					position: absolute;
					top: 0;
					padding: 14rpx;
					._img-model-content_img{
						width: 100%;
						height: 100%;
						border-radius: 20rpx;
					}
				}
			}
		}
		.collectionDetail-3d-bottom{
			width: 100%;
			.collectionDetail-3d-bottom-box{
				display: block;
				width: 592rpx;
				height: 340rpx;
				margin: 0 auto;
				position: relative;
				.collectionDetail-3d-bottom-img{
					width: 100%;
					height: 100%;
				}
				.collectionDetail-info{
					width: 100%;
					height: 50%;
					position: absolute;
					bottom: 0;
					.collectionDetail-info-title{
						font-size: 40rpx;
						font-weight: 500;
						color: #FFFFFF;
						text-align: center;
						margin-top: 10rpx;
					}
					.collectionDetail-info-main{
						display: flex;
						flex-wrap: nowrap;
						justify-content: center;
						align-items: center;
						margin-top: 16rpx;
						._info-main-l{
							font-size: 24rpx;
							font-weight: 400;
							color: #FFFFFF;
							padding: 8rpx 20rpx;
							background: linear-gradient(223deg, #A339D8 0%, #6948F2 100%);
							border-radius: 50rpx;
							margin-right: 8rpx;
						}
						._info-main-r{
							font-size: 24rpx;
							font-weight: 400;
							color: #FFFFFF;
							margin-left: 8rpx;
							._info-main-r-text{
								background: linear-gradient(223deg, #A339D8 0%, #6948F2 100%);
								border-top-left-radius: 50rpx;
								border-bottom-left-radius: 50rpx;
								padding: 8rpx 20rpx;
							}
							._info-main-r-num{
								background: #3C4456;
								border-top-right-radius: 50rpx;
								border-bottom-right-radius: 50rpx;
								padding: 8rpx 20rpx;
							}
						}
					}
				}
			}
		}
		.collectionDetail-main{
			width: 100%;
			padding: 0 32rpx;
			box-sizing: border-box;
			margin-top: 10rpx;
			.collectionDetail-main-box{
				width: 100%;
				.collectionDetail-price{
					font-size: 60rpx;
					font-weight: 500;
					color: #A06AF9;
					text-align: center;
				}
				.collectionDetail-business{
					width: 100%;
					padding: 32rpx 48rpx;
					background: #262A34;
					border-radius: 24rpx;
					margin-top: 32rpx;
					.collectionDetail-business-item{
						font-size: 28rpx;
						font-weight: 400;
						display: flex;
						flex-wrap: nowrap;
						justify-content: space-between;
						.collectionDetail-business-item-label{	
							color: #5D5F7A;
						}
						.collectionDetail-business-item-val{
							color: #ffffff;
							width: 320rpx;
							word-wrap:break-word;
							text-align:right;
						}
					}
					.collectionDetail-business-item-top{
						margin-top: 16rpx;
					}
				}
				.collectionDetail-main-chunk{
					width: 100%;
					margin-top: 48rpx;
					.collectionDetail-main-chunk-header{
						font-size: 36rpx;
						font-weight: 500;
						color: #FFFFFF;
					}
					.collectionDetail-main-chunk-content{
						margin-top: 16rpx;
						width: 100%;
						// height: 844rpx;
						background: #262A34;
						border-radius: 24rpx;
						padding: 48rpx;
						box-sizing: border-box;
						.collectionDetail-main-chunk-content-box{
							width: 100%;
							height: 100%;
							font-size: 30rpx;
							font-weight: 400;
							color: rgba(255,255,255,0.7);
						}
					}
				}
				.collectionDetail-record{
					background: #262A34;
					border-radius: 12px;
					margin-top: 32rpx;
					/deep/.u-page__item__title__slot-title{
						color: #ffffff;
						font-size: 28rpx;
						display: flex;
						._num{
							color: #9D7DFF;
							margin-left: 20rpx;
						}
					}
					/deep/.u-cell__body{
						padding: 16px 19px 16px 24px;
						font-size: 28rpx;
						.u-cell__title-text{
							color: #ffffff;
							font-size: 28rpx;
						}
						.u-icon__icon--info{
							color: #ffffff;
						}
					}
					/deep/.u-cell--clickable{
						background-color: rgba(0,0,0,0);
					}
					/deep/.u-collapse-item__content__text{
						padding: 0 30rpx 24rpx;
					}
					.u-collapse-content{
						padding: 0 0 0 20rpx;
						.collapse-content-item{
							margin-bottom: 16rpx;
							.collapse-content-item-box{
								display: flex;
								flex-wrap: nowrap;
								justify-content: space-between;
								align-items: center;
								font-size: 28rpx;
								font-weight: 400;
							}
							.collapse-content-item-name{
								color: #ffffff;
								display: flex;
								flex-wrap: nowrap;
								justify-content: flex-start;
								align-items: center;
								._name-my{
									padding: 6rpx 20rpx;
									background: linear-gradient(223deg, #A339D8 0%, #6948F2 100%);
									border-radius: 25px;
									font-size: 24rpx;
									color: #FFFFFF;
									margin-left: 16rpx;
								}
							}
							.collapse-content-item-money{
								color: #FFFFFF;
								font-size: 32rpx;
								font-weight: 500;
								text-align: right;
							}
							.collapse-content-item-time{
								font-size: 24rpx;
								font-weight: 400;
								color: #5D5F7C;
								line-height: 40rpx;
								margin-top: 8rpx;
							}
						}
					}
				}
			}
		}
		.page-footer{
			width: 100%;
			height: 152rpx;
			background: #202227;
			filter: blur(0px);
			position: fixed;
			bottom: 0;
			left: 0;
			transition: all 0.5s linear;
			.page-footer-box{
				width: 100%;
				display: flex;
				flex-wrap: nowrap;
				justify-content: space-between;
				padding: 32rpx;
				box-sizing: border-box;
				._footer-btn{
					width: 100%;
					height: 88rpx;
					background: linear-gradient(223deg, #A339D8 0%, #6948F2 100%);
					border-radius: 45rpx;
					text-align: center;
					line-height: 88rpx;
					font-size: 32rpx;
					font-weight: 500;
					color: #FFFFFF;
				}
			}
		}
		.page-footer-bottom{
			bottom: -152rpx;
		}
	}
	.tipsPopup{
		width: 508rpx;
		height: 596rpx;
		background: linear-gradient(223deg, #A339D8 0%, #6948F2 100%);
		border-radius: 40rpx;
		font-family: PingFangSC-Medium, PingFang SC, '微软雅黑';
		font:caption;
		.tipsPopup-icon{
			width: 200rpx;
			height: 200rpx;
			margin: 68rpx auto 24rpx;
			.tipsPopup-icon-img{
				width: 100%;
				height: 100%;
			}
		}
		.tipsPopup-title{
			font-size: 36rpx;
			font-weight: 500;
			color: #FFFFFF;
			text-align: center;
		}
		.tipsPopup-text{
			font-size: 28rpx;
			font-weight: 400;
			color: rgba(255,255,255,0.8);
			text-align: center;
			margin-top: 16rpx;
		}
		.tipsPopup-confirm{
			width: 328rpx;
			height: 88rpx;
			margin: 36rpx auto 0;
			border-radius: 45rpx;
			background-color: #ffffff;
			font-size: 32rpx;
			font-weight: 500;
			color: #6A47F1;
			line-height: 88rpx;
			text-align: center;
		}
	}
</style>
